import React, {
  useState,
  useImperativeHandle,
  RefObject,
  useEffect,
} from "react";
import {
  Modal,
  TreeSelect,
  Form,
  Input,
  InputNumber,
  message,
  Radio,
} from "antd";
import { IMenu } from "../../types/login";
import api from "../../api";
interface IProps {
  deptRef: RefObject<{
    showModal: (type: string, data?: IMenu | { parentId: string }) => void;
  }>;
  upData: () => Promise<void>;
}

const App: React.FC<IProps> = (props) => {
  // 控制弹窗显示隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 获取菜单列表
  const [deptList, setDeptList] = useState<IMenu[]>();
  // action: add 新增 edit 编辑
  const [action, setAction] = useState<string>("add");
  const [form] = Form.useForm();
  const showModal = (type: string, data?: IMenu | { parentId: string }) => {
    setAction(type);
    form.setFieldsValue(data);
    setIsModalOpen(true);
  };

  const handleOk = () => {
    // 校验form
    form.validateFields().then(() => {
      if (action === "add") editMenuApi(form.getFieldsValue());
      else if (action === "edit") createMenuApi(form.getFieldsValue());
    });
  };
  // 取消
  const handleCancel = () => {
    form.resetFields();
    setIsModalOpen(false);
  };

  // 获取菜单数据
  const getDepthData = async () => {
    const data = await api.getMenuList({ menuName: "", menuState: 1 });
    setDeptList(data);
  };

  // 新增菜单
  const editMenuApi = async (params: IMenu) => {
    await api.editMenu(params);
    message.success("添加成功");
    handleCancel();
    props.upData();
  };
  // 编辑菜单
  const createMenuApi = async (params: IMenu) => {
    await api.createMenu(params);
    message.success("编辑成功");
    handleCancel();
    props.upData();
  };

  useEffect(() => {
    getDepthData();
  }, []);

  useImperativeHandle(props.deptRef, () => ({
    showModal,
  }));

  return (
    <>
      <Modal
        title={action === "add" ? "新增菜单" : "编辑菜单"}
        width={800}
        maskClosable={false}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
        
      >
        <Form
          form={form}
          preserve={false}
          labelAlign="right"
          labelCol={{ span: 4 }}
          initialValues={{ menuType: 1, menuState: 1 }}
        >
          <Form.Item label="上级菜单" name="parentId">
            <TreeSelect
              showSearch
              placeholder="请选择上级菜单"
              allowClear
              treeDefaultExpandAll
              treeData={deptList}
              fieldNames={{ label: "menuName", value: "_id" }}
            />
          </Form.Item>
          <Form.Item label="菜单类型" name="menuType">
            <Radio.Group
              options={[
                { label: "菜单", value: 1 },
                { label: "按钮", value: 2 },
                { label: "页面", value: 3 },
              ]}
            />
          </Form.Item>
          <Form.Item
            label="菜单名称"
            name="menuName"
            rules={[{ required: true, message: "请输入菜单名称!" }]}
          >
            <Input placeholder="请输入菜单名称" />
          </Form.Item>
          <Form.Item noStyle shouldUpdate>
            {
              () => {
                if (form.getFieldValue('menuType') === 1 || form.getFieldValue('menuType') === 3) {
                  return (
                    <>

                      <Form.Item label="菜单图标" name="icon">
                        <Input placeholder="请输入菜单图标" />
                      </Form.Item>
                      <Form.Item label="路由地址" name="path">
                        <Input placeholder="请输入路由地址" />
                      </Form.Item>
                    </>

                  )
                } else {
                  return (
                    <>
                      <Form.Item label="权限标识" name="menuCode">
                        <Input placeholder="请输入权限标识" />
                      </Form.Item>
                    </>
                  )

                }
              }
            }

          </Form.Item>





          <Form.Item label="组件名称" name="component">
            <Input placeholder="请输入组件名称" />
          </Form.Item>
          <Form.Item label="排序" name="orderBy">
            <InputNumber placeholder="请输入排序" />
          </Form.Item>
          <Form.Item label="菜单状态" name="menuState">
            <Radio.Group
              options={[
                { label: "启用", value: 1 },
                { label: "禁用", value: 2 },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default App;
